<template>
  <div class="resource-status-summary">
    <a-card title="资源状态" size="small">
      <a-row :gutter="16">
        <!-- 生命周期状态 -->
        <a-col :span="6">
          <div class="status-item">
            <div class="status-label">
              <IconifyIcon icon="ant-design:clock-circle-outlined" />
              <span>生命周期</span>
            </div>
            <a-tag :color="getLifecycleColor(status.lifecycle)" size="small">
              {{ getLifecycleLabel(status.lifecycle) }}
            </a-tag>
          </div>
        </a-col>

        <!-- 可用性状态 -->
        <a-col :span="6">
          <div class="status-item">
            <div class="status-label">
              <IconifyIcon icon="ant-design:check-circle-outlined" />
              <span>可用性</span>
            </div>
            <a-tag
              :color="getAvailabilityColor(status.availability)"
              size="small"
            >
              {{ getAvailabilityLabel(status.availability) }}
            </a-tag>
          </div>
        </a-col>

        <!-- 版本状态 -->
        <a-col :span="6">
          <div class="status-item">
            <div class="status-label">
              <IconifyIcon icon="ant-design:version-outlined" />
              <span>版本</span>
            </div>
            <a-tag :color="getVersionColor(status.version)" size="small">
              {{ getVersionLabel(status.version) }}
            </a-tag>
          </div>
        </a-col>

        <!-- 自定义状态 -->
        <a-col :span="6">
          <div class="status-item">
            <div class="status-label">
              <IconifyIcon icon="ant-design:setting-outlined" />
              <span>业务状态</span>
            </div>
            <a-tag
              v-if="status.custom"
              :color="getCustomColor(status.custom.statusCode)"
              size="small"
            >
              {{ status.custom.statusName }}
            </a-tag>
            <a-tag v-else color="default" size="small">未设置</a-tag>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  resourceId: string;
  resourceType: string;
}

const props = defineProps<Props>();

// 状态数据
const status = reactive({
  lifecycle: 'ACTIVE',
  availability: 'AVAILABLE',
  version: 'ACTIVE',
  custom: {
    statusCode: 'APPROVED',
    statusName: '已审核',
  },
});

// 状态标签和颜色
const getLifecycleColor = (lifecycle: string) => {
  const colors: Record<string, string> = {
    DRAFT: 'default',
    ACTIVE: 'green',
    SUSPENDED: 'orange',
    ARCHIVED: 'red',
  };
  return colors[lifecycle] || 'default';
};

const getLifecycleLabel = (lifecycle: string) => {
  const labels: Record<string, string> = {
    DRAFT: '草稿',
    ACTIVE: '活跃',
    SUSPENDED: '暂停',
    ARCHIVED: '归档',
  };
  return labels[lifecycle] || lifecycle;
};

const getAvailabilityColor = (availability: string) => {
  const colors: Record<string, string> = {
    AVAILABLE: 'green',
    RESERVED: 'blue',
    IN_USE: 'orange',
    UNAVAILABLE: 'red',
    FAILED: 'red',
  };
  return colors[availability] || 'default';
};

const getAvailabilityLabel = (availability: string) => {
  const labels: Record<string, string> = {
    AVAILABLE: '可用',
    RESERVED: '已预订',
    IN_USE: '使用中',
    UNAVAILABLE: '不可用',
    FAILED: '故障',
  };
  return labels[availability] || availability;
};

const getVersionColor = (version: string) => {
  const colors: Record<string, string> = {
    DRAFT: 'default',
    STAGED: 'blue',
    CANARY: 'orange',
    ACTIVE: 'green',
    DEPRECATED: 'red',
    ROLLED_BACK: 'red',
  };
  return colors[version] || 'default';
};

const getVersionLabel = (version: string) => {
  const labels: Record<string, string> = {
    DRAFT: '草稿',
    STAGED: '已暂存',
    CANARY: '金丝雀',
    ACTIVE: '活跃',
    DEPRECATED: '已废弃',
    ROLLED_BACK: '已回滚',
  };
  return labels[version] || version;
};

const getCustomColor = (statusCode: string) => {
  const colors: Record<string, string> = {
    PENDING_REVIEW: 'orange',
    APPROVED: 'green',
    REJECTED: 'red',
    ACTIVE: 'blue',
    SUSPENDED: 'purple',
    ARCHIVED: 'default',
  };
  return colors[statusCode] || 'default';
};
</script>

<style lang="less" scoped>
.resource-status-summary {
  .status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;

    .status-label {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #666;
    }

    .ant-tag {
      margin: 0;
      font-size: 12px;
    }
  }
}
</style>
